<template>
    <el-card>
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
                            <el-form-item>
                        <el-input v-model="state.queryForm.name"
                                  placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-input v-model="state.queryForm.itemType"
                                  placeholder="物品类型"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-input v-model="state.queryForm.itemNumber"
                                  placeholder="物品型号"></el-input>
                </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button v-auth="'cardworld:items:save'" type="primary" @click="addOrUpdateHandle()">
                    新增
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button v-auth="'cardworld:items:delete'" type="danger" @click="deleteBatchHandle()">
                    删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%"
                  @selection-change="selectionChangeHandle">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                    <el-table-column prop="name" label="名称" header-align="center"
                                     align="center"></el-table-column>
                    <fast-table-column prop="itemType" label="物品类型"
                                       dict-type="cardworld_item_type"></fast-table-column>
                    <el-table-column prop="brandId" label="品牌ID" header-align="center"
                                     align="center"></el-table-column>
                    <el-table-column prop="itemNumber" label="物品型号" header-align="center"
                                     align="center"></el-table-column>
                    <el-table-column prop="location" label="地理位置" header-align="center"
                                     align="center"></el-table-column>
                    <el-table-column prop="tags" label="标签" header-align="center"
                                     align="center"></el-table-column>
                    <el-table-column prop="createTime" label="" header-align="center"
                                     align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                <template #default="scope">
                    <el-button v-auth="'cardworld:items:update'" type="primary" link
                               @click="addOrUpdateHandle(scope.row.id)">修改
                    </el-button>
                    <el-button v-auth="'cardworld:items:delete'" type="primary" link
                               @click="deleteBatchHandle(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="state.page"
                :page-sizes="state.pageSizes"
                :page-size="state.limit"
                :total="state.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
        >
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
    </el-card>
</template>

<script setup lang="ts" name="CardworldItemsIndex">
	import {useCrud} from '@/hooks'
	import {reactive, ref} from 'vue'
	import {IHooksOptions} from '@/hooks/interface'
    import AddOrUpdate from './add-or-update.vue'

	const state: IHooksOptions = reactive({
        dataListUrl: '/cardworld/items/page',
        deleteUrl: '/cardworld/items',
        queryForm: {
            name: '', 
            itemType: '', 
            itemNumber: ''
        }
    })

    const addOrUpdateRef = ref()
    const addOrUpdateHandle = (id
    ? : number
    ) =>
    {
        addOrUpdateRef.value.init(id)
    }

    const {
        getDataList,
        selectionChangeHandle,
        sizeChangeHandle,
        currentChangeHandle,
        deleteBatchHandle
    } = useCrud(state)
</script>
